<template>
	<div class="bar-sticky" :style="{ borderBottom: '1rpx solid ' + navigationBarStyle.borderColor }">
		<div style="
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
      " :style="{ height: 'calc( ' + navHeight + 'px + 44px )' }">
			<image v-if="navigationBarStyle.bgImg" :src="navigationBarStyle.bgImg" style="width: 100vw" mode="widthFix">
			</image>
		</div>
		<div class="status-line" :style="{
        height: navHeight + 'px',
        background: navigationBarStyle.background,
      }"></div>
		<div class="bar-line" :style="{ background: navigationBarStyle.background }">
			<div class="bar-line container-in" :style="{ background: navigationBarStyle.background }">
				<div class="bar-font bar-content" v-if="!custom">
					<div class="icon-fanhui bar-back" @click="back" v-if="showBack && !showHome">
						<u-icon class="fanhui" name="arrow-left" color="#333" size="40"></u-icon>
					</div>
					<div class="icon-fanhui bar-back" @click="goHome" v-if="showHome">
						<!-- showHome -->
						<u-icon class="fanhui" name="arrow-left" color="#333" size="40"></u-icon>
					</div>
					<div class="bar-title" :style="{
              color:
                navigationBarStyle.color == 'white' ? '#ffffff' : '#000000',
            }">
						{{ navigationBarStyle.iconText }}
					</div>
					<div class="bar-right">
						<slot name="right" />
					</div>
				</div>
				<div class="bar-font container-in" v-else>
					<slot></slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			custom: {
				type: Boolean,
				default: false,
			}, //自定义头部，否则沿用原生的头部样式
			navigationBarStyle: {
				type: Object,
				default: function() {
					return {
						bgImg: "",
						background: "",
						borderColor: "transparent",
						color: "white",
						iconText: "导航栏", //导航栏文字
					};
				},
			}, //原生头部自定义样式
		},
		data() {
			return {
				navHeight: getApp().globalData.navHeight, //状态栏高度
				navImgHeight: getApp().globalData.navHeight + 44, //状态栏高度
				showBack: true, //是否显示回退图标，默认显示
				showHome: false, //是否显示返回首页
			};
		},
		mounted() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route; //获取当前页面路由
			let curParam = routes[routes.length - 1].options; //获取路由参数
			if (
				curRoute == "pages/index/index" ||
				curRoute == "pages/mine/index" ||
				curRoute == "pages/mtask/index"
			) {
				this.showBack = false;
			}
			if (routes.length == 1) {
				if (
					curRoute != "pages/index/index" &&
					curRoute != "pages/mine/index" &&
					curRoute != "pages/mtask/index"
				) {
					this.showHome = true;
				}
			}
		},
		methods: {
			back() {
				let historyNavigate = uni.getStorageSync("historyNavigate");
				if (historyNavigate) {
					uni.navigateTo({
						url: historyNavigate,
					});
					uni.setStorageSync("historyNavigate", "");
				} else {
					uni.navigateBack("OBJECT");
				}
			},
			goHome() {
				// if(getApp().$options.router.currentRoute.path)
				if (this.vuex_info.type === "1") {
					uni.navigateTo({
						url: "/pages/sys/home/hall",
					});
				} else {
					uni.navigateTo({
						url: "/pages/sys/home/index",
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	/*正中*/
	.bar-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	//导航栏吸顶效果
	.bar-sticky {
		width: 100vw;
		position: fixed;
		position: -webkit-sticky;
		top: 0;
		left: 0;
		z-index: 1001;
		height: 0;
	}

	.status-line {
		position: relative;
		z-index: 1;
	}

	/*垂直居中*/
	.container-in {
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		height: 44px;
	}

	.bar-line {
		position: relative;
		z-index: 1;
		height: 44px; //导航栏高度

		.bar-back {
			top: 50%;
			transform: translateY(-50%);
			position: absolute;
			left: 30upx;
		}

		.bar-title {
			font-size: 32rpx;
		}

		.bar-right {
			position: absolute;
			right: 30upx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.fanhui {
		width: 40rpx;
		height: 40rpx;
	}
</style>
